<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>智能搜索商品弹出页面</title>
  	<link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        /*弹窗商品样式*/
        html,body{background: none !important;}
        header{position: fixed;top: 0;left: 0;right: 0;bottom: 0;}
        /*横向商品列表*/
        .goodsListbox{width: 100%;height: 60%;padding:0.2rem 0.26rem;box-sizing: border-box;background: #fff;
          position: fixed;bottom: 0px;left: 0px;}
        .goodsListItem{width: 100%;background: #fff;margin-bottom: 0.2rem;height:3.86rem;box-sizing: border-box;
          padding: 0.26rem;border-radius: 0.3rem;display: flex;flex-wrap: nowrap;justify-content: flex-start;}
        .goodsListItemleft{width:3.33rem;height: 3.33rem;margin-right: 0.1rem;position: relative;}
        .goodsListItemleft img:nth-child(1){width:3.33rem;height: 3.33rem;border-radius: 0.1rem;min-width: 3.33rem;}
        .iconbiaoqian{position: absolute;width:1.44rem;height:0.68rem;top:0.1rem;left:-0.12rem;}
        .goodsListItemright{width: 100%;padding:0.13rem 0.1rem;box-sizing: border-box;position: relative;}
        .goodsListItemright .goodsTitle{line-height: 0.48rem;font-size: 0.4rem;overflow: hidden;text-overflow: ellipsis;
          display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;padding: 0px;margin: 0px;height: 0.96rem;}
        .goodsTitleIcon{width: 0.4rem;;height:0.4rem;vertical-align: middle;display: inline-block;margin-bottom:0.05rem;}
        .goodsListItemright .shopName{font-size:0.3rem;padding: 0.12rem 0;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
        .goodsListItemright .discountbox{font-size:0.3rem;color: #fff;margin:0.12rem 0;display: flex;flex-wrap: nowrap;}
        .goodsListItemright .discountbox span:nth-child(1){height: 0.48rem;padding:0 0.25rem;
          background-image: url(../../image/goods/quanbg.png);border-radius:0.1rem;display: flex;align-items: center;
          margin-right: 0.15rem;background-size: 100% 100%;color: #fff;}
        .goodsListItemright .discountbox span:nth-child(2){height: 0.48rem;color:#ff4d3A;border-radius:0.1rem;padding:0 0.25rem;
          display: flex;align-items: center;background:#ffe4e4;border:0.5px solid #ff4d3A;
          padding: 0 0.1rem;box-sizing: border-box;}
        .goodsMsg{display: flex;flex-wrap: nowrap;justify-content: space-between;padding: 0.1rem 0;align-items:flex-end;}
        .goodsPrice{color:#ff0000;font-size:0.32rem;}
        .goodsPrice	span{color: #ff0000;font-size:0.51rem}
        .volumeNum{color: #999;font-size:0.32rem;padding-bottom: 0.1rem;}
    </style>
</head>
<body id="wrap">
    <header onclick="closeWinFun()" tapmode=""></header>
    <div class="goodsListbox" id="app" v-cloak>
        <div class="goodsListItem" v-for="item in good_listData"  @click="openGoodsDeatilFun(item)">
            <div class="goodsListItemleft">
                <img :src='item.pict_url' alt="">
                <img class="iconbiaoqian" v-if="item.type == 2" src="../image/specialPage/biaoqian.png" alt=""/>
            </div>
            <div class="goodsListItemright">
                <div class="goodsTitle">
                    <img class="goodsTitleIcon"  v-if="item.user_type == 0"   src="../image/goods/bill_icon_taobao.png" alt=""/>
                    <img class="goodsTitleIcon" v-if="item.user_type == 1" src="../image/goods/bill_icon_tmall.png" alt=""/>
                    {{item.short_title != '' ? item.short_title :  item.title}}
                </div>
                <p class="shopName">{{item.shop_title}}</p>
                <div class="discountbox">
                    <span>券{{item.coupon_amount}}元</span>
                    <span>补贴{{item.per_price}}元</span>
                </div>
                <div class="goodsMsg">
                    <span class="goodsPrice">到手价￥<span>{{item.end_price}}</span></span>
                    <span class="volumeNum">已抢{{item.volume}}件</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app;
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    //初始化数据
    app = new Vue({
        el: '#app',
        data: {
            good_listData:api.pageParam.data
        }
    })
}
// 打开商品详情页面
function opendetail(item) {
    api.openTabLayout({
        name: 'item',
        url: './item.html',
        useWKWebView: true,
        bgColor: '#fff',
        pageParam: {
            item: item
        }
    });
}
// 关闭当前页面
function closeWinFun(){
    api.closeFrame({});
}
</script>
</html>
